import VueRouter from "vue-router";
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

const router = new VueRouter({
    routes: [
        {
            path: '/about',
            component: About,
            meta: { isAuth: true }
        },
        {
            path: '/home',
            component: Home,
            meta: { title: '主页' },
            children: [
                {
                    path: 'news',
                    component: News,
                    meta: { isAuth: true, title: '新闻' },
                    beforeEnter: (to, from, next) => {
                        console.log('独享路由守卫');
                        if (to.meta.isAuth) {
                            if (localStorage.getItem('name') === 'mose') {
                                next()
                            } else {
                                alert('你不能进入')
                            }
                        } else {
                            next()
                        }
                    }
                },
                {
                    path: 'message',
                    component: Message,
                    meta: { title: '消息' },

                    // children: [
                    //     {
                    //         name: 'detail',
                    //         path: 'detail/:id/:title',//params参数占位符
                    //         component: Detail,
                    //         props: { a: 100 }
                    //     }
                    // ]
                    children: [//props传值 
                        {
                            name: 'detail',
                            path: 'detail/:id',//params参数占位符
                            component: Detail,
                            // 第一种：值是对象
                            // props: { id: 100 }
                            // 第二种：接收params参数
                            props: true,
                            // 第三种 值是函数 会把路由中传递的query参数，以props的形式传递给Detail组件
                            // props ($route) {
                            //     return {
                            //         id: $route.query.id
                            //     }
                            // }
                        }
                    ]
                },
            ]
        },
    ]
})
// 全局前置路由守卫 每次路由切换之前被调用
// router.beforeEach((to, from, next) => {
//     console.log('前置路由守卫', to, from);
//     if (to.meta.isAuth) {
//         if (localStorage.getItem('name') === 'mose') {
//             next()
//         } else {
//             alert('你不能进入')
//         }
//     } else {
//         next()
//     }
// })
// 全局后置路由守卫 每次路由切换之后被调用
router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from);
    document.title = to.meta.title || '管理系统'
})

export default router
/* 
1.路由
    一组映射关系，需要路由器进行管理
2.基本使用
    npm i vue-router@3 // 适用vue2
    Vue.use(VueRouter)
    配置router/index.js
        const router = new VueRouter({
            routes: [
                {
                    path: '/about',
                    component: About
                },
                {
                    path: '/home',
                    component: Home
                },
            ]
        })
        暴露一下router
    组件中使用 <router-link></router-link>
        指定内容区 <router-view></router-view>
        实现高亮 active-class属性
2.多级路由
        配置时使用children
        组建中使用 to="/home/news" // 使用全路径
3.query参数
         <!-- 字符串写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{{ msg.title }}</router-link> -->
        <!-- 对象写法 -->
        <router-link 
            :to="{
                path:'/home/message/detail',
                query:{
                    id:msg.id,
                    title:msg.title
                }
            }">
            {{ msg.title }}
        </router-link>
        组件接收 $route.query.id
4.params参数
        <!-- params字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${msg.id}/${msg.title}`">{{ msg.title }}</router-link> -->
        <!-- params对象写法 -->
        <router-link 
            :to="{
                name:'detail',//这里使用命名路由
                params:{
                    id:msg.id,
                    title:msg.title
                }
            }">
            {{ msg.title }}
        </router-link>
        接收 $route.params.id
*/